<!DOCTYPE html>
<html dir="ltr" lang="zh_cn"><!--<![endif]--><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>结账</title>
    <base href="https://mall.opencart.cn/">

    <!-- Facebook share -->
    <meta property="og:site_name" content="OpenCart 3.0 中文专业版 - PHP 开源电商系统">
    <meta property="og:url" content="https://mall.opencart.cn/index.php?route=checkout/checkout">
    <meta property="og:type" content="website">
    <meta property="og:title" content="结账">
    <meta property="og:description" content="">
    <meta property="og:image" content="https://mall.opencart.cn/image/cache/catalog/logo-600x315.png">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="315">

    <script src="https://hm.baidu.com/hm.js?752079c169218184ec5f539120602ec2"></script><script src="https://mall.opencart.cn/catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="https://mall.opencart.cn/catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://mall.opencart.cn/catalog/view/javascript/layer/layer.js" type="text/javascript"></script><link rel="stylesheet" href="https://mall.opencart.cn/catalog/view/javascript/layer/theme/default/layer.css?v=3.1.1" id="layuicss-layer">
    <script src="https://mall.opencart.cn/catalog/view/theme/mobile/javascript/jquery.unveil.js" type="text/javascript"></script>
    <link href="https://mall.opencart.cn/catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://mall.opencart.cn/catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://mall.opencart.cn/catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen">
    <script src="https://mall.opencart.cn/catalog/view/javascript/jquery/datetimepicker/moment/moment.min.js" type="text/javascript"></script>
    <script src="https://mall.opencart.cn/catalog/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="https://mall.opencart.cn/catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="https://mall.opencart.cn/catalog/view/theme/mobile/javascript/common.js" type="text/javascript"></script>
    <link href="https://mall.opencart.cn/catalog/view/theme/mobile/stylesheet/stylesheet.css" rel="stylesheet">
    <script>
        var _hmt = _hmt || []; (function() {var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752079c169218184ec5f539120602ec2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();
    </script>

</head>
<body class="checkout-checkout" ontouchstart="" onmouseover="">

<a href="#page-top" class="go-top" style="display: none;"><i class="iconfont"></i></a>


<div class="container">
    <ul class="breadcrumb">
        <li><a href="https://mall.opencart.cn/">首页</a></li>
        <li><a href="https://mall.opencart.cn/index.php?route=checkout/cart">购物车</a></li>
        <li><a href="https://mall.opencart.cn/index.php?route=checkout/checkout">结账</a></li>
    </ul>

    <div class="row">
        <div id="content">
            <div class="col-sm-12">
                <div class="nav-bar mr-0 ml-0">结账</div>
            </div>
            <div class="quick-checkout-wrapper">
                <div class="main-section-wrapper mb-2">
                    <div class="checkout-section " id="shipping-address-section">
                        <div class="title-wrapper">
                            <h2 class="mb-0">
                                配送地址
                                <span class="btn-new-address text-primary">添加新地址</span>
                            </h2>
                        </div>
                        <div id="shipping-existing">
                            <ul>
                                <li data-address-id="342" class="active">
                                    <div class="item">
                                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                                        cloud (12312312312)<br>上海市市辖区徐汇区sdadasd<br>123123
                                    </div>
                                    <div class="address-action">
                                        <span class="edit"><i class="iconfont"></i></span>
                                    </div>
                                </li>
                            </ul>
                            <input type="hidden" name="shipping_address_id" value="342">
                        </div>
                    </div>


                    <div class="checkout-section" id="payment-method-section">
                        <h2>支付方式</h2>
                        <div class="radio active">
                            <label>
                                <input type="radio" name="payment_method" value="alipay" checked="checked">
                                支付宝
                            </label>
                        </div>
                        <div class="radio ">
                            <label>
                                <input type="radio" name="payment_method" value="wechat_pay">
                                微信支付
                            </label>
                        </div>
                        <div class="radio ">
                            <label>
                                <input type="radio" name="payment_method" value="bank_transfer">
                                银行转账
                            </label>
                        </div>
                        <div class="radio ">
                            <label>
                                <input type="radio" name="payment_method" value="cod">
                                货到付款
                            </label>
                        </div>
                    </div>

                    <div class="checkout-section" id="shipping-method-section">
                        <h2>配送方式</h2>
                        <div class="radio active">
                            <label>
                                <input type="radio" name="shipping_method" value="free.free" checked="checked">
                                免费配送 - ￥0.00</label>
                        </div>
                    </div>

                    <div class="checkout-section" id="cart-section">
                        <h2>购物车</h2>
                        <div class="product-item">
                            <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-14-100x100.png" class="img-responsive">
                            <div class="info">
                                <span class="name">Beats EP 头戴式耳机有线重低音耳麦通用b耳机</span>
                                <span class="text-muted">Product 6</span>
                                <span>￥99.00 x 1</span>
                                <span class="total">￥99.00</span>
                            </div>
                        </div>
                        <div class="product-item">
                            <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-16-100x100.png" class="img-responsive">
                            <div class="info">
                                <span class="name">B&amp;O BeoPlay P2  (多子产品演示)无线蓝牙便携小音箱 丹麦bo迷你户外运动口袋音响</span>
                                <span>
                    大号&nbsp;
                    朱红色&nbsp;
                  </span>
                                <span class="text-muted">Product 19</span>
                                <span>￥8.00 x 3</span>
                                <span class="total">￥24.00</span>
                            </div>
                        </div>
                        <div class="list-two-column-justified">
                            <dl>
                                <dt>
                                    <span>商品总额</span>
                                </dt>
                                <dd>
                                    <span>￥123.00</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <span>免费配送</span>
                                </dt>
                                <dd>
                                    <span>￥0.00</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <strong>订单总额</strong>
                                </dt>
                                <dd>
                                    <strong>￥123.00</strong>
                                </dd>
                            </dl>
                        </div>
                    </div>

                    <div class="checkout-section" id="comment-section">
                        <h2>订单留言</h2>
                        <textarea name="comment" rows="4" class="form-control"></textarea>
                    </div>

                    <div class="checkout-section" id="agree-section">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="terms" value="1"> <span>我已阅读并同意 <a href="https://mall.opencart.cn/index.php?route=information/information/agree&amp;information_id=5" class="agree"> <b>使用条款</b></a></span>
                            </label>
                        </div>
                    </div>


                    <div class="ml-1 mr-1">
                        <input type="button" value="确认订单" id="button-submit" data-loading-text="正在加载..." class="btn btn-primary btn-block">
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<script type="text/javascript"><!--
$.ajaxSetup({cache: false});

var show_load = function() {
    layer.load(2, {shade: [0.05, '#000'] });
}

var hide_load = function() {
    layer.closeAll('loading');
}

var show_network_toast = function () {
    layer.closeAll('loading');
    layer.msg('网络连接失败，请稍后再试！');
}

$(document).on('click', '.show-more', function(event) {
    $(this).toggleClass('active').siblings('li').toggleClass('block');
});

// New address
$(document).delegate('#shipping-address-section .btn-new-address', 'click', function() {
    open_address_form_modal(0, 'shipping');
});

$(document).delegate('#shipping-address-section .address-action .edit', 'click', function() {
    var address_id = parseInt($(this).parents('li').data('address-id'));
    open_address_form_modal(address_id, 'shipping');
});
$(document).delegate('#payment-address-section .btn-new-address', 'click', function() {
    open_address_form_modal(0, 'payment');
});

$(document).delegate('#payment-address-section .address-action .edit', 'click', function() {
    var address_id = parseInt($(this).parents('li').data('address-id'));
    open_address_form_modal(address_id, 'payment');
});

function open_address_form_modal(address_id, type) {
    layer.open({
        type: 2,
        title: (address_id < 1 ? '添加新地址' : '修改地址'),
        shadeClose: false,
        skin: 'address-form-modal',
        shade: 0.3,
        scrollbar: false,
        area: ['100%', '100%'],
        content: 'index.php?route=checkout/checkout/address_form&modal=1&type=' + type + '&address_id=' + address_id,
        end: function(index) {
            show_load();
            reload_section_html();
        }
    });
}

function change_address_id(type, address_id) {
    var data = {};
    data[type + '_address_id'] = address_id;

    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: data,
        dataType: 'json',
        beforeSend: function () {
            show_load();
        },
        success: function(json) {
            if (json['redirect']) {
                location = json['redirect'];
                return;
            }

            reload_section_html();
        },
        complete: function () {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
}

function change_pickup_id(pickup_id, country_id, zone_id) {
    var data = {};
    data['pickup_id'] = pickup_id;
    data['country_id'] = country_id;
    data['zone_id'] = zone_id;

    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: data,
        dataType: 'json',
        beforeSend: function () {
            show_load();
        },
        success: function(json) {
            if (json['redirect']) {
                location = json['redirect'];
                return;
            }

            reload_section_html();
        },
        complete: function () {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
}

$(document).delegate('#pickup-section select[name="pickup_id"]', 'change', function() {
    var pickup_id = $(this).val();
    var country_id = $('#pickup-section select[name="country_id"]').val();
    var zone_id = $('#pickup-section select[name="zone_id"]').val();
    change_pickup_id(pickup_id, country_id, zone_id);
});

function change_is_pickup(is_pickup) {
    var data = {};
    data['is_pickup'] = is_pickup;

    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: data,
        dataType: 'json',
        beforeSend: function () {
            show_load();
        },
        success: function(json) {
            if (json['redirect']) {
                location = json['redirect'];
                return;
            }

            reload_section_html();
        },
        complete: function() {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
}

$(document).delegate('#if-pickup-section input[type="radio"]', 'change', function() {
    var is_pickup = $(this).val();
    change_is_pickup(is_pickup);
});

$(document).delegate('#shipping-address-section ul li .item', 'click', function() {
    var address_id = $(this).parent().data('address-id');
    change_address_id('shipping', address_id);
});


// Payment method changed
$(document).on('change', '#payment-method-section input[type=\'radio\']', function() {
    save_payment_method();
});

// Shipping method changed
$(document).delegate('#shipping-method-section input[type=\'radio\']', 'change', function() {
    save_shipping_method();
});

// Comment changed
$(document).delegate('#comment-section textarea[name=\'comment\']', 'change', function() {
    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: $('#comment-section textarea[name=\'comment\']'),
        dataType: 'json',
        beforeSend: function () {
            show_load();
        },
        success: function(json) {
            reload_section_html();
        },
        complete: function() {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
});

// Agreement changed
$(document).delegate('#agree-section input[name=\'terms\']', 'change', function() {
    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: {terms: $('#agree-section input[name=\'terms\']').prop('checked') ? 1 : 0},
        dataType: 'json',
        beforeSend: function () {
            show_load();
        },
        success: function(json) {
            reload_section_html();
        },
        complete: function() {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
});

// Submit button clicked
$(document).delegate('#button-submit', 'click', function () {
    submit();
});

// Payment method & shipping method
function save_payment_method() {
    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: $('#payment-method-section input[type=\'radio\']:checked'),
        dataType: 'json',
        beforeSend: function() {
            show_load();
            $('.container .alert-danger').remove();
            $('#payment-method-section .alert-danger').remove();
        },
        success: function(json) {
            if (json['redirect']) {
                location = json['redirect'];
                return;
            }

            if (json['error'] && json['error']['warning']) {
                $('#payment-method-section').append('<div class="alert alert-danger">' + json['error']['warning'] + '</div>')
            }

            reload_section_html();
        },
        complete: function () {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
}
function save_shipping_method() {
    $.ajax({
        url: 'index.php?route=checkout/checkout/update',
        type: 'post',
        data: $('#shipping-method-section input[type=\'radio\']:checked'),
        dataType: 'json',
        beforeSend: function() {
            show_load();
            $('.container .alert-danger').remove();
            $('#shipping-method-section .alert-danger').remove();
        },
        success: function(json) {
            if (json['redirect']) {
                location = json['redirect'];
                return;
            }

            if (json['error'] && json['error']['warning']) {
                $('#shipping-method-section').append('<div class="alert alert-danger">' + json['error']['warning'] + '</div>')
            }

            reload_section_html();
        },
        complete: function () {
            // TODO
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
}

function submit() {
    var data = {}, loads;
    $('.quick-checkout-wrapper input[type="hidden"], .quick-checkout-wrapper input[type="text"], .quick-checkout-wrapper input[type="password"], .quick-checkout-wrapper select, .quick-checkout-wrapper input:checked, .quick-checkout-wrapper textarea[name="comment"]').each(function () {
        data[$(this).attr('name')] = $(this).val();
    });

    $.ajax({
        url: 'index.php?route=checkout/checkout/confirm',
        type: 'post',
        data: data,
        dataType: 'json',
        beforeSend: function() {
            $('.form-group').removeClass('has-error');
            $('.alert-danger').remove();
            $('.text-danger').remove();
            $('#button-submit').button('loading');
            show_load();
        },
        success: function(json) {
            if (json['redirect']) {
                location = json['redirect'];
                return;
            }

            if (json['error']) {
                hide_load();

                $('#button-submit').button('reset');

                if (json['error']['pickup']) {
                    $('#pickup-section').append('<div class="alert alert-danger">' + json['error']['pickup'] + '</div>')
                }


                if (json['error']['payment_address']) {
                    $('#payment-address-section.no-addresses').addClass('border-red');
                    $('html, body').animate({ scrollTop: 0} , 'fast');
                    layer.msg(json['error']['payment_address']);
                }
                if (json['error']['shipping_address']) {
                    $('#shipping-address-section.no-addresses').addClass('border-red');
                    $('html, body').animate({ scrollTop: 0} , 'fast');
                    layer.msg(json['error']['shipping_address']);
                }

                if (json['error']['payment_method'] && json['error']['payment_method']['warning']) {
                    $('html, body').animate({ scrollTop: 0} , 'fast');
                    $('#payment-method-section').append('<div class="alert alert-danger">' + json['error']['payment_method']['warning'] + '</div>')
                }
                if (json['error']['shipping_method'] && json['error']['shipping_method']['warning']) {
                    $('html, body').animate({ scrollTop: 0} , 'fast');
                    $('#shipping-method-section').append('<div class="alert alert-danger">' + json['error']['shipping_method']['warning'] + '</div>')
                }

                if (json['error']['agree']) {
                    if (json['error']['agree']['terms']) {
                        var control = $('#agree-section [name="terms"]');
                        control.closest('label').addClass('has-error');
                        control.closest('label').after('<div class="text-danger">' + json['error']['agree']['terms'] + '</div>');
                    }
                }
            } else {
                // Order created go to payment connect page
                location = 'index.php?route=checkout/checkout/connect';
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
            $('#button-submit').button('reset');
        },
        complete: function () {
            // hide_load();
        }
    });
}

function reload_section_html() {
    $.ajax({
        url: 'index.php?route=checkout/checkout/reload',
        dataType: 'html',
        beforeSend: function () {
            // TODO
        },
        success: function(html) {
            $('.main-section-wrapper').replaceWith(html);
        },
        complete: function () {
            hide_load();
        },
        error: function(xhr, ajaxOptions, thrownError) {
            show_network_toast();
        }
    });
}
//--></script>
<footer>
    <div class="language-currency-wrapper mb-1 mt-1">
        <a href="#" id="switch-language">
            <img src="catalog/language/zh-cn/zh-cn.png" alt="简体中文" title="简体中文">
            简体中文
        </a>

        <script type="text/javascript">
            $('#switch-language').click(function (e) {
                e.preventDefault();
                layer.open({
                    type: 1,
                    title: '语言',
                    closeBtn: 1,
                    anim: 2,
                    shadeClose: true,
                    scrollbar: false,
                    area: ['80%'],
                    content: language_modal_content()
                });
            });

            function language_modal_content() {
                var html = '';
                html += '<div class="p-2">';
                html += '<form action="https://mall.opencart.cn/index.php?route=common/language/language" method="post" enctype="multipart/form-data" id="language">';
                html += '<input type="hidden" name="code" value="" />';
                html += '<input type="hidden" name="redirect" value="https://mall.opencart.cn/index.php?route=checkout/checkout" />';
                html += '<div class="list-group mb-0">';
                html += '<a href="de-de" class="list-group-item"><img src="catalog/language/de-de/de-de.png"/> Deutsch</a>';
                html += '<a href="es-es" class="list-group-item"><img src="catalog/language/es-es/es-es.png"/> Espanol</a>';
                html += '<a href="fr-fr" class="list-group-item"><img src="catalog/language/fr-fr/fr-fr.png"/> French</a>';
                html += '<a href="ru-ru" class="list-group-item"><img src="catalog/language/ru-ru/ru-ru.png"/> Russian</a>';
                html += '<a href="zh-hk" class="list-group-item"><img src="catalog/language/zh-hk/zh-hk.png"/> 中文繁体</a>';
                html += '<a href="zh-cn" class="list-group-item"><img src="catalog/language/zh-cn/zh-cn.png"/> 简体中文</a>';
                html += '<a href="en-gb" class="list-group-item"><img src="catalog/language/en-gb/en-gb.png"/> English</a>';
                html += '</div>';
                html += '</form>';
                html += '</div>';
                return html;
            }
        </script>

        <a href="#" id="switch-currency">
            ￥  人民币
        </a>

        <script type="text/javascript">
            $('#switch-currency').click(function (e) {
                e.preventDefault();
                layer.open({
                    type: 1,
                    title: '货币',
                    closeBtn: 1,
                    anim: 2,
                    shadeClose: true,
                    scrollbar: false,
                    area: ['80%'],
                    content: currency_modal_content()
                });
            });

            function currency_modal_content() {
                var html = '';
                html += '<div class="p-2">';
                html += '<form action="https://mall.opencart.cn/index.php?route=common/currency/currency" method="post" enctype="multipart/form-data" id="currency">';
                html += '<input type="hidden" name="code" value="" />';
                html += '<input type="hidden" name="redirect" value="https://mall.opencart.cn/index.php?route=checkout/checkout" />';
                html += '<div class="list-group mb-0">';
                html += '<a href="USD" class="list-group-item">$ US Dollar</a>';
                html += '<a href="CNY" class="list-group-item">￥ 人民币</a>';
                html += '</div>';
                html += '</form>';
                html += '</div>';
                return html;
            }
        </script>

    </div>
    <div class="container">
        <div class="footer-powered">
            技术支持 <a href="http://www.opencart.cn">opencart.cn</a> OpenCart 3.0 中文专业版 - PHP 开源电商系统 © 2018
        </div>
    </div>
</footer>
<nav id="bottom-tab-menu">
    <div class="menu-item">
        <a class="" href="https://mall.opencart.cn/">
            <i class="iconfont"></i>
            <div class="name">首页</div>
        </a>
    </div>
    <div class="menu-item">
        <a class="" href="https://mall.opencart.cn/index.php?route=product/search">
            <i class="iconfont"></i>
            <div class="name">搜索</div>
        </a>
    </div>
    <div class="menu-item">
        <a class="" href="https://mall.opencart.cn/index.php?route=mobile/categories">
            <i class="iconfont"></i>
            <div class="name">分类</div>
        </a>
    </div>
    <div class="menu-item cart">
        <a class="active" href="https://mall.opencart.cn/index.php?route=checkout/cart">
            <i class="iconfont"><span class="cart-total" style=""></span></i>
            <div class="name">购物车</div>
        </a>
    </div>
    <div class="menu-item">
        <a class="" href="https://mall.opencart.cn/index.php?route=account/account">
            <i class="iconfont"></i>
            <div class="name">我的</div>
        </a>
    </div>
</nav>




</body></html>